<template>
  <div>
<!--    1.搜索框-->
    <van-nav-bar
        title="店铺列表"
        left-arrow
        @click-left="back"
    />
    <div>
      <van-search v-model="querydto.name" placeholder="请输入搜索店铺名称" />
    </div>
    <div>
      <van-popup v-model="show" position="right" :style="{ width: '70%',height:'100%' }" >
        <van-button type="primary">主要按钮</van-button>
      </van-popup>
    </div>
<!--    3.商品列表 上拉分页-->
    <div style="margin-bottom: 30px">
      <van-list
          v-model="loading"
          :finished="finished"
          finished-text="亲，我是有底线的！"
          @load="loadData"
      >

          <van-card span="12"
                    style="margin-bottom: 20px"
                    v-for="s in stores"
                    :key="s.title"
                    @click="tz(s.id)"
                    :title="s.title"
                    :desc="s.info"
                    :thumb="s.imgurl"

            >
            <template #tags>
              距离：<van-tag style="margin: 5px" plain type="danger">{{s.distance}}米</van-tag><br>
              <van-tag style="margin: 5px" plain type="danger">{{s.adress}}</van-tag>
              <van-tag style="margin: 5px" plain type="danger">{{s.phone}}</van-tag>
            </template>
            <template #footer>
              <van-button size="mini">进入店铺</van-button>
            </template>
          </van-card>
      </van-list>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      switch1:true,
      switch2:true,
      option2: [
        { text: '默认排序', value: 'comments' },
        // { text: '距离排序', value: 'distance' },
      ],
      show:false,
      stores:[
      ],
      loading:false,
      finished:false,
      pages:5,
      querydto:{
        title: "",
        field:"comments",
        page:1,
        size:10,
        lats:"",
        lngs:""
      }
    }
  },mounted() {

    this.loadData();
  },
  methods:{
    selectType(name,title){
      this.sorttype=title;
      if(title=="筛选"){
        this.show=true;
      }
    },
    loadData(){
      //加载数据
      //如果没有到底，就请求下一页
      if(this.querydto.page<this.pages){
        this.loading=true;
        this.querydto.title = this.$route.query.nametitle;
        this.querydto.lats = this.$store.state.lat;
        this.querydto.lngs = this.$store.state.lng;
        //请求接口 Axios
        this.axios.post("/api/store/selectbytype.do",this.querydto).then(res=>{
          if(res.data.code==200){
            var arr=res.data.data.data;
            for(var i in arr){
              this.stores.push(arr[i]);
            }
            this.loading=false;
            this.querydto.page++;
            this.pages=res.data.data.pages;
          }
        });
      }else {
        this.finished=true;
      }
    },
    tz(id){
      //路由传参
      this.$router.push({path:"/store",query:{id:id}});
    },
    back(){
      this.$router.push("/index");
    }
  }
}
</script>